<template>
	<view>
		<view class="navbar acea-row row-around">
			<view class="item acea-row row-center-wrapper" :class="{ on: navOn === 'null' }" @click="onNav('null')">
				全部
			</view>
			<view class="item acea-row row-center-wrapper" :class="{ on: navOn === '0' }" @click="onNav('0')">
				满减券
			</view>
			<view class="item acea-row row-center-wrapper" :class="{ on: navOn === '1' }" @click="onNav('1')">
				折扣券
			</view>
		</view>
		<view class='coupon-list' v-if="couponsList.length">
			<view class='item acea-row row-center-wrapper' v-for='(item, index) in couponsList' :key="index">
				<view class="couponsBox">
					<image class="couponsLeft" :src="item.couponPicture" mode="" />
					<view class="contentBox">
						<view class="title">{{ item.couponName }}</view>
						<view class="lable">{{ item.couponType }}</view>
						<p class="time">有效期至{{ item.effectiveTime }}</p>
					</view>
					<view class="couponsRight">
						<p class="price"><text style="font-size: 38rpx;">￥</text><text
								style="font-size: 28rpx;">{{ item.money }}</text></p>
						<p class="profile">店铺商品立减</p>
						<view class="button" @click="goIndex">立即使用</view>
					</view>
				</view>
			</view>
		</view>
		<view class='loadingicon acea-row row-center-wrapper' v-if="couponsList.length">
			<text class='loading iconfont icon-jiazai' :hidden='loading == false'></text>{{ loadTitle }}
		</view>
		<view class='noCommodity' v-if="!couponsList.length">
			<view class='pictrue'>
				<image src='../../../static/images/noCoupon.png'></image>
			</view>
		</view>
		<home></home>
	</view>
</template>
<script>
	import {
		getUserCoupons,
		getCoupons
	} from '@/api/api.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import home from '@/components/home';

	export default {
		components: {
			home
		},
		filters: {
			validStrFilter(status) {
				const statusMap = {
					'usable': '全部',
					'unusable': '立减券',
					'overdue': '满减券',
					'notStart': '折扣券'
				};
				return statusMap[status];
			}
		},
		data() {
			return {
				couponsList: [],
				loading: false,
				loadend: false,
				loadTitle: '加载更多',
				pageSize: 1,
				pageNum: 10,
				navOn: 'null'
			};
		},
		computed: mapGetters(['isLogin']),
		watch: {
			isLogin: {
				handler: function(newV) {
					if (newV) {
						this.getUseCoupons();
					}
				},
				deep: true
			}
		},
		onLoad() {
			if (this.isLogin) {
				this.getUseCoupons();
			} else {
				toLogin();
			}
		},
		methods: {
			goIndex(){
				uni.switchTab({
					url: '/pages/platform/index'
				})
			},
			onNav(type) {
				this.navOn = type;
				this.couponsList = [];
				this.pageSize = 1;
				this.loadend = false;
				this.getUseCoupons();
			},
			getUseCoupons() {
				if (this.loadend) return;
				if (this.loading) return;
				const params = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					type: this.navOn
				};
				this.loading = true;
				getCoupons(params).then(res => {
					const list = res.data.records || [];
					this.loadend = list.length < this.pageNum;
					this.couponsList = this.couponsList.concat(list);
					this.loadTitle = this.loadend ? '我也是有底线的' : '加载更多';
					this.pageSize += 1;
					this.loading = false;
				}).catch(err => {
					this.loading = false;
					this.loadTitle = '加载更多';
				});
			}
		},
		onReachBottom() {
			this.getUseCoupons();
		}
	}
</script>
<style lang="scss" scoped>
	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 76rpx;
		background-color: #FFFFFF;
		z-index: 9;

		.item {
			border-top: 5rpx solid transparent;
			border-bottom: 5rpx solid transparent;
			font-size: 30rpx;
			color: #999999;

			&.on {
				border-bottom-color: #085CD6;
				color: #085CD6;
			}
		}
	}

	.couponsBox {
		width: 702rpx;
		height: 190rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: auto;
		margin-bottom: 24rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;

		.couponsLeft {
			width: 130rpx;
			height: 130rpx;
			margin: 30rpx 20rpx;
		}

		.contentBox {
			width: 336rpx;
			height: 130rpx;
			margin: 30rpx 0rpx;

			.title {
				width: 336rpx;
				height: 70rpx;
				font-weight: 600;
				font-size: 26rpx;
				color: #000000;
				line-height: 32rpx;
				text-align: left;
			}

			.lable {
				max-width: 144rpx;
				height: 29rpx;
				text-align: center;
				line-height: 29rpx;
				background-color: #11041A;
				border-radius: 29rpx;
				color: #fff;
				font-size: 22rpx;
			}

			.time {
				font-weight: 400;
				font-size: 16rpx;
				color: #666666;
				line-height: 22rpx;
				text-align: left;
				margin-top: 10rpx;
			}
		}

		.couponsRight {
			width: 190rpx;
			height: 190rpx;
			background-image: url('../../../static/myImages/couponsRight.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 10rpx 29rpx;

			.price {
				color: #FAD174;
				text-align: center;
			}

			.profile {
				height: 28rpx;
				font-weight: 600;
				font-size: 20rpx;
				color: #FAD174;
				text-align: center;
			}

			.button {
				width: 112rpx;
				height: 40rpx;
				background: #FAD174;
				border-radius: 24rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: #11041A;
				line-height: 40rpx;
				text-align: center;
				margin: auto;
				margin-top: 10rpx;
			}
		}
	}

	.coupon-list {
		margin-top: 122rpx;
	}

	.coupon-list .item {
		margin-bottom: 46rpx;
	}

	.loadingicon {
		margin-top: 20rpx;
		color: #999999;
	}

	.noCommodity {
		margin-top: 300rpx;
		text-align: center;
	}
</style>